<template>
    <div class="HomeClassic">
        <div class="HomeClassic-header">
            <div class="HomeClassic-header-logo">
                <img src="../../../../assets/images/phq-logo.png" />
                <div>{{config.appName}}</div>
            </div>
            <div class="HomeClassic-header-body">
                <div>
                    <!-- 头部其他内容 -->
                </div>
                <div>
                    <!-- 头部用户信息 -->
                    <user class-name="user-classic" />
                </div>
            </div>
        </div>
        <div class="HomeClassic-body">
            <div class="HomeClassic-body-left" :style="{width:`${isCollapse?64:240}px`}">
                <menu-list :active-menu="activeMenu" :is-collapse="isCollapse" @change="MenuActive" />
            </div>
            <div class="HomeClassic-body-main" :style="{width:`calc(100% - ${isCollapse?64:240}px)`}">
                <div class="HomeClassic-body-main-header">
                    <div class="HomeClassic-body-main-header-menuSize">
                        <el-tooltip :content="isCollapse?'展开菜单':'收起菜单'">
                            <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse"></i>
                        </el-tooltip>
                    </div>
                    <div class="HomeClassic-body-main-header-body">
                        <div @click.stop="historyRightMove" class="HomeClassic-body-main-header-body-left">
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="HomeClassic-body-main-header-body-history" ref="homeHistory">
                            <transition-group name="router-history-anim" tag="div" ref="homeHistoryList" class="HomeClassic-body-main-header-body-history-list"
                                :style="{'width':`${historyWidth}px`,'left':`${historyLeft}px`}">
                                <div class="HomeClassic-body-main-header-body-history-item" v-for="(item,index) in historyList" :key="item.id"
                                    :class="item.active?'HomeClassic-body-main-header-body-history-item-active':''" @click.stop="MenuActive(item.route)">
                                    <div class="HomeClassic-body-main-header-body-history-item-icon">
                                        <div v-if="item.img">
                                            <img :src="item.img" />
                                        </div>
                                        <div v-else>
                                            <i :class="item.icon"></i>
                                        </div>
                                    </div>
                                    <div class="HomeClassic-body-main-header-body-history-item-title">{{item.title}}</div>
                                    <div v-show="historyList.length > 1" class="HomeClassic-body-main-header-body-history-item-close" @click.stop="DelHistoryMenu(index)">
                                        <i class="el-icon-close"></i>
                                    </div>
                                </div>
                            </transition-group>
                        </div>
                        <div @click.stop="historyLeftMove" class="HomeClassic-body-main-header-body-right">
                            <i class="el-icon-caret-right"></i>
                        </div>
                    </div>
                </div>
                <div class="HomeClassic-body-main-body">
                    <!--  include:包含    exclude:排除 -->
                    <!-- 
                        <keep-alive :include="getKeepAlive" :max="256">
                        <router-view></router-view>
                    </keep-alive>
                    -->
                    <router-view v-slot="{ Component }">
                        <keep-alive :include="getKeepAlive" :max="256">
                            <component :is="Component" />
                        </keep-alive>
                    </router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import setup from "../Home";
import MenuList from "@/views/app/home/components/MenuList";
import User from "@/views/app/home/components/User.vue";
export default defineComponent({
    name: "HomeClassic",
    components: { MenuList, User },
    setup,
});
</script>


<style scoped lang="scss">
//首页
.HomeClassic {
    height: 100%;

    &-header {
        display: flex;
        justify-content: space-between;
        height: 50px;
        background-color: $white-color;
        &-logo {
            padding: 0 5px;
            display: flex;
            align-items: center;
            & > div {
                padding-left: 5px;
                font-size: 28px;
                font-weight: bold;
                text-shadow: 0 0 5px #7d7d7d;
            }
            & > img {
                height: 45px;
                width: 45px;
            }
        }
        &-body {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            & > div {
                &:first-child {
                    height: 100%;
                }
                &:last-child {
                    height: 100%;
                    text-align: right;
                    border-left: 1px $border-color3 solid;
                }
            }
        }
    }

    &-body {
        height: calc(100% - 50px);
        display: flex;

        &-left {
            width: 240px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.3s;
        }

        &-main {
            width: calc(100% - 240px);
            height: 100%;
            transition: all 0.3s;
            &-header {
                width: 100%;
                height: 30px;
                background-color: $text-gray2-color;
                display: flex;
                align-items: center;
                border-top: 1px $box-gray1-color solid;
                &-menuSize {
                    text-align: center;
                    font-size: 26px;
                    width: 30px;
                    cursor: pointer;
                    &:hover {
                        color: $primary-color;
                    }
                }
                &-body {
                    height: 100%;
                    width: calc(100% - 30px);
                    display: flex;
                    align-items: center;
                    &-left,
                    &-right {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        width: 15px;
                        height: 100%;
                        background-color: #e3e1e1;
                        color: $text-regular-color;
                        cursor: pointer;
                        overflow: hidden;
                        transition: all 0.3s;
                        &:hover {
                            color: $primary-color;
                            background-color: #dad8d8;
                        }
                    }
                    &-history {
                        height: 100%;
                        width: calc(100% - 30px);
                        overflow: hidden;
                        &-list {
                            height: calc(100% - 6px);
                            position: relative;
                            transition: all 0.5s;
                            padding: 3px 0;
                        }
                        &-item {
                            margin: 0 2px;
                            background-color: $text-gray5-color;
                            padding: 3px 5px;
                            height: 18px;
                            cursor: pointer;
                            border-radius: 3px;
                            display:inline-block;
                            &:hover {
                                color: #000;
                                background-color: $primary-gray;
                            }
                            &-icon {
                                display:inline-block;
                                height: 100%;
                                width: 18px;
                                overflow: hidden;
                                border-radius: 3px;
                                position: relative;
                                & > div {
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 14px;
                                    & > img {
                                        height: 100%;
                                        width: 100%;
                                    }
                                }
                            }
                            &-title {
                                display:inline-block;
                                position: relative;
                                bottom: 4px;
                                word-break: keep-all; /* 不换行 */
                                white-space: nowrap; /* 不换行 */
                                margin-left: 3px;
                            }
                            &-close {
                                position: relative;
                                bottom: 3px;
                                display:inline-block;
                                margin-left: 3px;
                                transition: all 0.3s;
                                &:hover {
                                    color: #ff0000;
                                    transform: scale(1.5) rotate(90deg);
                                }
                            }
                            &-active {
                                background-color: $primary-color;
                                color: #fff;
                                &:hover {
                                    color: #fff;
                                    background-color: rgba(
                                        $color: $primary-color,
                                        $alpha: 0.8
                                    );
                                }
                            }
                        }
                    }
                }
            }
            &-body {
                width: calc(100% - 20px);
                height: calc(100% - 51px);
                overflow-x: hidden;
                overflow-y: auto;
                padding: 10px;
            }
        }
    }
}
</style>
